<template>
	<view class="checked-box flex-row items-center">
		<view style="height: 80rpx;width: 80rpx;">
			<u-image height="80" width="80" :src="data.photo" shape="circle"></u-image>
		</view>
		<view class="flex-col" style="flex: 1;">
			<view class=" flex-row items-center justify-between">
				<view class="gname">
					{{data.companyName}}
				</view>
				<view class="glocation">
					<image src="/static/index/location2.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
					<text>{{data.distance||0}}km</text>
				</view>
			</view>
			<view class="gdesc">
				{{data.introduce}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {
					companyName: "",
					companyAddress: "",
					photo: "",
					license: "",
					introduce: "",
					lat: 0,
					lng: 0,
					distance: 0
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.checked-box {
		height: 154rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 36rpx 24rpx;

		.gname {
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}

		.glocation {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}

		.gdesc {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 500rpx;
		}
	}
</style>